<template>
	<view :style="{height:height-100+'px'}">
		<view class="input-wrap">
			<view class="input-icon">
				<text class="iconfont" style="font-size:30upx;color: rgba(155, 155, 155, 1);">&#xe641;</text>
			</view>
			<input v-model="key" :style="{width:searchFlag?'90%':'70%'}" placeholder="请输入关键词" @focus="searchFlag=true"
				   @confirm="saveKey"
				   maxlength="10" confirm-type="search" placeholder-class="placeholder"/>
			<view v-if="searchFlag" @click="blur" style="width:100upx;text-align:right;line-height:60upx;color: #2DA4FD;font-size: 26upx">取消</view>
			<view v-else class="share" @click="goShare">
				<image src="../../static/img/share.png" style="width: 44upx;height: 44upx"/>
				<view class="share-text">分享知识</view>
			</view>
		</view>
		<history v-if="searchFlag" :keys="keys" @search="search"/>
		<view v-else>
			<view class="hot-text" style="padding-top: 130upx;display: flex;justify-content: space-between">
				热门标签
				<span @click="goTags" style="font-size: 26upx;color: #B7B7B7;padding-right: 18upx">全部标签》</span>
			</view>
			<view class="hot-wrap">
				<span @click="selTag(item)" :style="{color:item.id==tagsId?'#F5DB16':''}" class="hot-item" v-for="item in tags">{{item.name}}({{item.contentCount}})</span>
			</view>
			<view class="content">
				<view v-for="item in list" @click="goUrl('knowledgeDetails?id='+item.id)">
					<view class="content-title">{{item.title}}</view>
					<view style="display: flex">
						<image class="content-image"
							   :src="item.userAvatar||team.logo">
						</image>
						<view>
							<view class="content-name">{{item.userName||team.name}}</view>
							<view class="content-time">{{item.createTime}}</view>
						</view>
					</view>
					<view class="content-text">
						{{item.content}}
					</view>
					<view class="line"/>
				</view>
			</view>
			<button :loading="loading==1" size="mini" class="load-but" @click="loser">
				{{loading==1?'正在加载':loading==-2?'加载失败，点击重试':''}}
			</button>
		</view>
	</view>
</template>

<script>
	import API from '../../common/api.js';
	import Util from '../../common/util.js';
	import history from '../components/history.vue';

	export default {
		components:{
			history
		},
		data() {
			return {
				searchFlag:false,
				height: uni.getSystemInfoSync().windowHeight,
				team:uni.getStorageSync('team')?JSON.parse(uni.getStorageSync('team')):{name:'团队',id:0},
				key:'',
				keys:uni.getStorageSync('keys')?JSON.parse(uni.getStorageSync('keys')):{},
				loading:0,
				page:0,
				list:[],
				tags:[],
				tagsId:'',
			}
		},
		onLoad(options){
			console.log(uni.getStorageSync('team'),9999)
			this.key=options.key||''
			this.tagsId=options.tagsId
			if(this.tagsId){
				uni.setNavigationBarTitle({
					title:options.tagsName
				})
			}
			this.getTags()
			this.getData()
		},
		onShow(){
			let options=null
			if(uni.getStorageSync('tagData')){
				options=JSON.parse(uni.getStorageSync('tagData'))
				uni.removeStorageSync('tagData')
			}else{
				return
			}
			this.tagsId=options.tagsId
			uni.setNavigationBarTitle({
				title:options.tagsName
			})
			this.getData()
		},
		onPullDownRefresh(){
			this.page=0
			this.getData()
		},
		onReachBottom(){
			if([-1,-2].indexOf(this.loading)<0){
				this.page++
				this.getData()
			}
		},
		methods:{
			search(key){
				this.searchFlag=false
				this.key=key
				this.page=0
				this.getData()
			},
			blur(){
				this.searchFlag=false
			},
			getTags(){
				API.tagsList({
					"limit": 10,
					"managerId": this.team.id,
					"page": 0}).then(res=>{
					if(res.status==200){
						this.tags=res.data
					}else{
						uni.hideLoading()
						uni.showModal({
							title: '提示',
							content: '请求失败！',
							showCancel: false,
						});
					}
				})
			},
			selTag(item){
				this.tagsId=item.id
				uni.setNavigationBarTitle({
					title:item.name
				})
				this.page=0
				this.getData()
			},
			loser(){
				if(this.loading==-2){
					this.getData()
				}
			},
			saveKey(){
				if(!this.key){
					// uni.showToast({
					// 	title: '请输入关键字',
					// 	icon: 'none'
					// })
					this.page=0
					this.searchFlag=false
					this.getData()
				}else{
					let id=this.team.id
					if(!this.keys[id]){
						this.keys[id]=[]
					}
					if(this.keys[id].indexOf(this.key)>-1){
						this.page=0
						this.searchFlag=false
						this.getData()
					}else{
						if(this.keys[id].length>9){
							this.keys[id].splice(9,1)
						}
						this.keys[id].unshift(this.key)
						uni.setStorage({
							key: 'keys',
							data: JSON.stringify(this.keys),
							success:()=> {
								this.page=0
								this.searchFlag=false
								this.getData()
							}
						});
					}
				}
			},
			goUrl(url){
				uni.navigateTo({
					url: '../index/'+url
				});
			},
			goTags(){
				uni.navigateTo({
					url: '../index/tags?flag='+1
				});
			},
			goShare(){
				uni.navigateTo({
					url: '../index/share'
				});
			},
			getData(){
				this.loading=1
				API.knowledgeList({
					keyword:this.key,
					limit:10,
					managerId:this.team.id,
					tagsId:this.tagsId,
					page:this.page}).then(res=>{
						if(res.status==200){
							res.data.length&&res.data.map(r=>{
								r.createTime=Util.formatTime(r.createTime)
							})
							if(this.page){
								this.list=this.list.concat(res.data)
							}else{
								this.list=res.data
								uni.stopPullDownRefresh();
							}
							if(res.total==this.list.length){
								this.loading=-1
							}else{
								this.loading=0
							}
						}else{
							uni.showModal({
								title: '提示',
								content: '加载失败，请重试',
								showCancel: false,
							});
							this.loading=-2
						}
				})
			},
		}
	}
</script>

<style>
	button:after {
		border-width: 0;
	}
	.input-wrap{
		display: flex;
		border-radius: 0px;
		box-shadow: 0px 2px 2px 0px rgba(240, 240, 240, 1);
		padding: 20upx 30upx;
		width: calc(100% - 60upx);
		background: white;
		position: fixed;
	}
	.input-icon{
		padding:8upx 3% 0 4%;
		background:rgba(243, 244, 246, 1);
		border-bottom-left-radius: 8upx;
		border-top-left-radius: 8upx;
	}
	input{
		height: 60upx;
		line-height: 40upx;
		border-bottom-right-radius: 8upx;
		border-top-right-radius: 8upx;
		background-color: rgba(243, 244, 246, 1);
	}
	.placeholder{
		color: rgba(143, 145, 151, 1);
		font-size: 26upx;
		font-family: PingFangSC-regular;
	}
	.share{
		width: 16%;
		margin-left: 2%;
		height: 30upx;
		margin-top: -10upx;
		text-align: center
	}
	.share-text{
		color: rgba(16, 16, 16, 1);
		font-size: 20upx;
		font-family: PingFangSC-regular;
	}
	.hot-text{
		padding:30upx 0 0 30upx ;
		color: rgba(16, 16, 16, 1);
		font-size: 40upx;
		font-family: PingFangSC-bold;
		margin-bottom: 20upx;
	}
	.hot-wrap{
		display: flex;
		flex-wrap: wrap;
		padding: 0 30upx;
		max-height: 240upx;
		overflow-y: hidden;
	}
	.hot-item{
		padding:10upx 20upx;
		margin:20upx 20upx 0 0;
		line-height: 40upx;
		border-radius: 8upx;
		background-color: rgba(246, 246, 246, 1);
		text-align: center;
		color: rgba(50, 60, 72, 1);
		font-size: 26upx;
		font-family: PingFangSC-regular;
	}
	.content{
		padding:0 30upx;
		margin-top: 80upx;
	}
	.content-title{
		color: rgba(16, 16, 16, 1);
		font-size: 40upx;
		font-family: PingFangSC-bold;
		margin: 20upx 0;
	}
	.content-image{
		width: 60upx;
		height: 60upx;
		border-radius: 60upx;
		margin-right:10upx;
	}
	.content-name{
		color: rgba(0, 0, 0, 1);
		font-size: 28upx;
		font-family: PingFangSC-regular;
	}
	.content-time{
		color: rgba(123, 123, 123, 1);
		font-size: 18upx;
		font-family: PingFangSC-regular;
	}
	.content-text{
		margin: 20upx 0;
		color: rgba(16, 16, 16, 1);
		font-size: 28upx;
		font-family: PingFangSC-regular;
		overflow : hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
	}
	.line{
		height: 20upx;
		width:100vw;
		margin-left:-30upx;
		background:#FAFAFA
	}
</style>
